<template>
	<view v-if="shenheStatus == 0" class="complete">
		<view class="head">
			<view class="title">
				<!-- <image src="../images/complete.png"></image> -->
				<text>还有资料未绑定，只需3步即可完成上线</text>
			</view>
			<view class="steps">
				<view :class="['stepItem', storeInfo.progress == 1 ? 'choosed' : '']">
					<view class="circle">
						<text></text>
					</view>
					<text>注册小程序</text>
				</view>
				<view :class="['stepItem', storeInfo.progress == 2 ? 'choosed' : '']">
					<view class="circle">
						<text></text>
					</view>
					<text>完善资料</text>
				</view>
				<view :class="['stepItem', storeInfo.progress == 3 ? 'choosed' : '']">
					<view class="circle">
						<text></text>
					</view>
					<text>当面付签约</text>
				</view>
				<view :class="['stepItem', storeInfo.progress == 4 ? 'choosed' : '']">
					<view class="circle">
						<text></text>
					</view>
					<text>绑定收款码</text>
				</view>
			</view>
			<view class="reason" v-if="storeInfo.progress == 1 && storeInfo.num == 3">
				<text>您提交的内容有以下错误:</text>
				<text>{{ storeInfo.mini_info.msg }}</text>
			</view>

			<view class="reason" v-if="storeInfo.progress == 2 && storeInfo.num == 5">
				<text>您提交的内容有以下错误:</text>
				<text>{{ storeInfo.mini_data.msg }}</text>
			</view>
		</view>
		<view class="content">
			<aliInformation v-if="storeInfo.progress == 1" :bind_store_id="bind_store_id" :info="storeInfo.mini_info"
				:status="storeInfo.num" @submit="getCompleteInfo()"></aliInformation>
			<aliMiniApp v-if="storeInfo.progress == 2" :bind_store_id="bind_store_id" :info="storeInfo.mini_info"
				:status="storeInfo.num" :allCat="storeInfo.all_categories" @submit="getCompleteInfo()"></aliMiniApp>
			<aliSignContract v-if="storeInfo.progress == 3" :bind_store_id="bind_store_id" :info="storeInfo.mini_info"
				:status="storeInfo.num" @submit="getCompleteInfo()"></aliSignContract>
			<moneyCode v-if="storeInfo.progress == 4" :bind_store_id="bind_store_id" :qrcode_id="storeInfo ? storeInfo.qrcode_id : ''" :status="storeInfo.num"
				@submit="getCompleteInfo()" type="ali"></moneyCode>
			<view class="success" v-if="storeInfo.progress == 5">
				恭喜您已经成功创建店铺~
			</view>
		</view>
	</view>
	<Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
	import Shenhe from '@/components/shenhe/shenhe';
	import aliInformation from './components/aliInformation.vue';
	import aliMiniApp from './components/aliMiniApp.vue';
	import aliSignContract from './components/aliSignContract.vue';
	import moneyCode from './components/moneyCode.vue';
	export default {
		components: {
			aliInformation,
			aliMiniApp,
			moneyCode,
			Shenhe,
			aliSignContract
		},
		data() {
			return {
				bind_store_id: '',
				storeInfo: {},
			};
		},
		onLoad(option) {
			if (option.id) {
				this.bind_store_id = option.id;
				this.getCompleteInfo();
			}
		},
		methods: {
			// 获取小程序完善信息
			async getCompleteInfo() {
				const res = await this.$allrequest.merchant.completeInfo({
					bind_store_id: this.bind_store_id,
					type: 'ali',
				},true);
				if (res.code == 0) {
					this.storeInfo = res.data;
					if (this.storeInfo.progress > 3) {
					
					}
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	.complete {
		color: #262626;
		font-family: PingFang SC;

		.head {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 40rpx;
			padding-bottom: 24rpx;
			border-bottom: 24rpx solid #f2f2f2;

			.title {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 30rpx;

				image {
					width: 104rpx;
					height: 90rpx;
					margin-bottom: 20rpx;
				}
			}

			.steps {
				width: 100%;
				display: flex;
				margin-top: 40rpx;
				padding: 0 60rpx;

				.stepItem {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;

					.circle {
						width: 34rpx;
						height: 34rpx;
						border-radius: 50%;
						background-color: #f2f2f2;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 26rpx;

						text {
							display: block;
							width: 18rpx;
							height: 18rpx;
							border-radius: 50%;
							background-color: #bababd;
						}
					}

					::before {
						content: '';
						position: absolute;
						width: calc(50% - 17rpx);
						height: 2rpx;
						background-color: #e6e6e6;
						top: 17rpx;
						left: 0;
					}

					::after {
						content: '';
						position: absolute;
						width: calc(50% - 17rpx);
						height: 2rpx;
						background-color: #e6e6e6;
						top: 17rpx;
						left: calc(50% + 17rpx);
					}
				}

				.stepItem:nth-child(1) {
					::before {
						height: 0;
					}
				}

				.stepItem:last-child {
					::after {
						height: 0;
					}
				}

				.choosed {
					.circle {
						background-color: #fdf1f0;

						text {
							background-color: #f0250e;
						}
					}
				}
			}

			.reason {
				width: 702rpx;
				margin-top: 24rpx;
				padding: 24rpx;
				background-color: #f8f8f8;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;

				text:nth-child(1) {
					font-weight: 500;
					margin-bottom: 10rpx;
				}

				text:nth-child(2) {
					color: #f0250e;
				}
			}
		}

		.success {
			display: flex;
			padding-top: 100rpx;
			font-size: 24rpx;
			color: #8c8c8c;
			justify-content: center;
		}
	}
</style>
